<template>
  <div class="dashboard-container">
    <!-- 顶部摘要卡片 -->
    <div class="summary-cards">
      <div class="summary-card">
        <div class="card-icon active">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">24</div>
          <div class="card-label">活跃方案</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-icon scenarios">
          <el-icon><Grid /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">18</div>
          <div class="card-label">场景总数</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-icon deductions">
          <el-icon><VideoPlay /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">12</div>
          <div class="card-label">本周推演</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-icon success">
          <el-icon><Trophy /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">65%</div>
          <div class="card-label">平均成功率</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 - 两列布局 -->
    <div class="main-content">
      <!-- 左列 -->
      <div class="left-column">
        <!-- 战术方案状态 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>战术方案状态</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="pieChart" class="chart"></div>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color active"></span>
                <span class="legend-text">活跃: 24</span>
              </div>
              <div class="legend-item">
                <span class="legend-color in-progress"></span>
                <span class="legend-text">执行中: 6</span>
              </div>
              <div class="legend-item">
                <span class="legend-color completed"></span>
                <span class="legend-text">已完成: 18</span>
              </div>
              <div class="legend-item">
                <span class="legend-color failed"></span>
                <span class="legend-text">失败: 2</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 场景库规模 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>场景库规模</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="barChart1" class="chart"></div>
            <div class="chart-summary">
              生产环境: 8, 测试环境: 6, 仿真环境: 4
            </div>
          </div>
        </el-card>

        <!-- MITRE ATT&CK技术覆盖度热力图 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>MITRE ATT&CK技术覆盖度热力图</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="radarChart" class="chart"></div>
            <div class="chart-note">(示意)</div>
          </div>
        </el-card>
      </div>

      <!-- 右列 -->
      <div class="right-column">
        <!-- 本周推演次数趋势 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>本周推演次数趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="lineChart" class="chart"></div>
            <div class="chart-summary">
              周一~周日: 2, 1, 3, 2, 1, 2, 1
            </div>
          </div>
        </el-card>

        <!-- 热点漏洞排行 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>热点漏洞排行</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="barChart2" class="chart"></div>
            <div class="chart-summary">
              CVE-2023-1234、CVE-2022-5678、CVE-2021-9999
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 战术方案表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>战术方案 (成功率TOP10)</span>
        </div>
      </template>
      <el-table :data="tacticalPlans" style="width: 100%" stripe>
        <el-table-column prop="rank" label="序号" width="80" align="center" />
        <el-table-column prop="name" label="方案名称" min-width="150" />
        <el-table-column prop="target" label="目标场景" min-width="150" />
        <el-table-column prop="steps" label="步骤数" width="100" align="center" />
        <el-table-column prop="successRate" label="成功率" width="120" align="center">
          <template #default="scope">
            <el-tag 
              :type="getSuccessRateType(scope.row.successRate)" 
              size="small"
            >
              {{ scope.row.successRate }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="100" align="center" />
        <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" circle>
              <el-icon><View /></el-icon>
            </el-button>
            <el-button type="warning" size="small" circle>
              <el-icon><Edit /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 通知中心 -->
        <el-card class="notification-card">
          <template #header>
        <div class="card-header">
          <span>通知中心</span>
            </div>
          </template>
          <div class="notification-list">
            <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
              <el-icon class="notification-icon"><Warning /></el-icon>
              <span class="notification-time">[{{ notification.time }}]</span>
              <span class="notification-content">{{ notification.content }}</span>
            </div>
          </div>
        </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  TrendCharts, 
  Grid, 
  VideoPlay, 
  Trophy, 
  Warning, 
  View, 
  Edit 
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const router = useRouter()

// 通知数据
const notifications = ref([
  {
    time: '12:01',
    content: '战术方案"渗透测试A"执行完成,报告已生成。'
  },
  {
    time: '11:45',
    content: '新场景"工控测试环境"已导入。'
  },
  {
    time: '10:30',
    content: '系统检测到高危漏洞利用行为,已触发告警。'
  }
])

// 战术方案数据
const tacticalPlans = ref([
  { rank: 1, name: '应急响应方案', target: '应急演练场景', steps: 8, successRate: 98, creator: '王五', updateTime: '2024-01-15 14:30' },
  { rank: 2, name: '数据泄露防护', target: '数据库区', steps: 12, successRate: 96, creator: '吴十', updateTime: '2024-01-15 13:45' },
  { rank: 3, name: '渗透测试A', target: '工控测试环境', steps: 15, successRate: 92, creator: '张三', updateTime: '2024-01-15 12:20' },
  { rank: 4, name: '网络隔离方案', target: '隔离区测试', steps: 6, successRate: 90, creator: '李四', updateTime: '2024-01-15 11:15' },
  { rank: 5, name: '入侵检测方案', target: '监控中心', steps: 10, successRate: 87, creator: '赵六', updateTime: '2024-01-15 10:30' },
  { rank: 6, name: '漏洞扫描方案', target: '扫描测试区', steps: 9, successRate: 85, creator: '钱七', updateTime: '2024-01-15 09:45' },
  { rank: 7, name: '安全加固方案', target: '加固测试环境', steps: 14, successRate: 81, creator: '孙八', updateTime: '2024-01-15 08:20' },
  { rank: 8, name: '应急演练方案', target: '演练环境', steps: 11, successRate: 78, creator: '周九', updateTime: '2024-01-14 17:30' },
  { rank: 9, name: '风险评估方案', target: '评估测试区', steps: 13, successRate: 75, creator: '郑十', updateTime: '2024-01-14 16:15' },
  { rank: 10, name: '安全培训方案', target: '培训环境', steps: 7, successRate: 72, creator: '王十一', updateTime: '2024-01-14 15:00' }
])

// 图表实例
let pieChartInstance = null
let barChart1Instance = null
let radarChartInstance = null
let lineChartInstance = null
let barChart2Instance = null

// 获取成功率标签类型
const getSuccessRateType = (rate) => {
  if (rate >= 90) return 'success'
  if (rate >= 80) return 'warning'
  return 'danger'
}

// 初始化饼图
const initPieChart = () => {
  const chartDom = document.getElementById('pieChart')
  if (!chartDom) return
  
  pieChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '方案状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: [
          { value: 24, name: '活跃', itemStyle: { color: '#5cb3ff' } },
          { value: 6, name: '执行中', itemStyle: { color: '#4ade80' } },
          { value: 18, name: '已完成', itemStyle: { color: '#fbbf24' } },
          { value: 2, name: '失败', itemStyle: { color: '#f87171' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pieChartInstance.setOption(option)
}

// 初始化场景库规模柱状图
const initBarChart1 = () => {
  const chartDom = document.getElementById('barChart1')
  if (!chartDom) return
  
  barChart1Instance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['生产环境', '测试环境', '仿真环境'],
      axisLabel: {
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      max: 8,
      axisLabel: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '场景数量',
        type: 'bar',
        data: [
          { value: 8, itemStyle: { color: '#4ade80' } },
          { value: 6, itemStyle: { color: '#5cb3ff' } },
          { value: 4, itemStyle: { color: '#a855f7' } }
        ],
        barWidth: '60%'
      }
    ]
  }
  barChart1Instance.setOption(option)
}

// 初始化雷达图
const initRadarChart = () => {
  const chartDom = document.getElementById('radarChart')
  if (!chartDom) return
  
  radarChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    radar: {
      indicator: [
        { name: '初始访问', max: 100 },
        { name: '执行', max: 100 },
        { name: '持久化', max: 100 },
        { name: '防御规避', max: 100 },
        { name: '凭证访问', max: 100 },
        { name: '发现', max: 100 },
        { name: '横向移动', max: 100 },
        { name: '指挥与控制', max: 100 }
      ],
      radius: '65%'
    },
    series: [
      {
        name: '技术覆盖度',
        type: 'radar',
        data: [
          {
            value: [100, 65, 70, 65, 60, 75, 60, 60],
            name: '覆盖度',
            itemStyle: {
              color: '#5cb3ff'
            },
            areaStyle: {
              color: 'rgba(92, 179, 255, 0.3)'
            }
          }
        ]
      }
    ]
  }
  radarChartInstance.setOption(option)
}

// 初始化推演趋势折线图
const initLineChart = () => {
  const chartDom = document.getElementById('lineChart')
  if (!chartDom) return
  
  lineChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      max: 3,
      axisLabel: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '推演次数',
        type: 'line',
        data: [2, 1, 3, 2, 1, 2, 1],
        smooth: true,
        lineStyle: {
          color: '#5cb3ff',
          width: 3
        },
        itemStyle: {
          color: '#5cb3ff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(92, 179, 255, 0.3)' },
              { offset: 1, color: 'rgba(92, 179, 255, 0.1)' }
            ]
          }
        }
      }
    ]
  }
  lineChartInstance.setOption(option)
}

// 初始化漏洞排行柱状图
const initBarChart2 = () => {
  const chartDom = document.getElementById('barChart2')
  if (!chartDom) return
  
  barChart2Instance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['CVE-2023-1234', 'CVE-2022-5678', 'CVE-2021-9999'],
      axisLabel: {
        fontSize: 10,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      max: 5,
      axisLabel: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '漏洞热度',
        type: 'bar',
        data: [
          { value: 5, itemStyle: { color: '#f87171' } },
          { value: 3, itemStyle: { color: '#fbbf24' } },
          { value: 2, itemStyle: { color: '#5cb3ff' } }
        ],
        barWidth: '60%'
      }
    ]
  }
  barChart2Instance.setOption(option)
}

// 响应式处理
const handleResize = () => {
  if (pieChartInstance) pieChartInstance.resize()
  if (barChart1Instance) barChart1Instance.resize()
  if (radarChartInstance) radarChartInstance.resize()
  if (lineChartInstance) lineChartInstance.resize()
  if (barChart2Instance) barChart2Instance.resize()
}

onMounted(() => {
  nextTick(() => {
    initPieChart()
    initBarChart1()
    initRadarChart()
    initLineChart()
    initBarChart2()
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)
  })
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (pieChartInstance) {
    pieChartInstance.dispose()
    pieChartInstance = null
  }
  if (barChart1Instance) {
    barChart1Instance.dispose()
    barChart1Instance = null
  }
  if (radarChartInstance) {
    radarChartInstance.dispose()
    radarChartInstance = null
  }
  if (lineChartInstance) {
    lineChartInstance.dispose()
    lineChartInstance = null
  }
  if (barChart2Instance) {
    barChart2Instance.dispose()
    barChart2Instance = null
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 50px);
}

// 顶部摘要卡片
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  
  .summary-card {
    background:var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;

    .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;

      &.active {
        background: linear-gradient(135deg, #5cb3ff, #3b82f6);
      }

      &.scenarios {
        background: linear-gradient(135deg, #4ade80, #10b981);
      }

      &.deductions {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
      }

      &.success {
        background: linear-gradient(135deg, #a855f7, #8b5cf6);
      }
    }

    .card-content {
      flex: 1;

      .card-value {
        font-size: 28px;
        font-weight: bold;
        color:var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
      }

      .card-label {
        font-size: 14px;
        color:var(--text-color-secondary);
      }
    }
  }
}

// 主要内容区域
.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;

  .left-column,
  .right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

// 图表卡片
.chart-card {
  .card-header {
    font-weight: 600;
    color:var(--text-color);
  }

  .chart-container {
    position: relative;
    
    .chart {
      height: 250px;
      width: 100%;
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
      justify-content: center;

      .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .legend-color {
          width: 12px;
          height: 12px;
          border-radius: 2px;

          &.active {
            background: #5cb3ff;
          }

          &.in-progress {
            background: #4ade80;
          }

          &.completed {
            background: #fbbf24;
          }

          &.failed {
            background: #f87171;
          }
        }

        .legend-text {
          font-size: 12px;
          color: #6b7280;
        }
      }
    }

    .chart-summary {
      text-align: center;
      font-size: 12px;
      color: #6b7280;
      margin-top: 10px;
    }

    .chart-note {
      text-align: center;
      font-size: 12px;
      color: #9ca3af;
      margin-top: 10px;
    }
  }
}

// 表格卡片
.table-card {
  margin-bottom: 20px;

  .card-header {
    font-weight: 600;
    color:var(--text-color);
  }
}

// 通知中心
  .notification-card {
  .card-header {
    font-weight: 600;
    color:var(--text-color);
    }
    
    .notification-list {
      .notification-item {
        display: flex;
        align-items: center;
      padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
        
        &:last-child {
          border-bottom: none;
        }
        
        .notification-icon {
          color: #fbbf24;
        margin-right: 10px;
          font-size: 16px;
        }
        
        .notification-time {
        color:var(--text-color-secondary);
          font-size: 12px;
        margin-right: 10px;
        min-width: 60px;
        }
        
        .notification-content {
        color:var(--text-color);
          font-size: 14px;
          flex: 1;
        }
      }
    }
  }

</style>